<template>
  <div class="material-header">
    <div class="drop-down">
      <el-select
        popper-class="material-select"
        v-model="value"
        placeholder="请选择"
        size="mini"
        ref="select"
        @change="change"
      >
        <el-option
          v-for="item in category"
          :key="item.id"
          :label="`${item.title}（${item.material_count}）`"
          :value="item.id"
        ></el-option>
        <div class="material-placeholder">
          <el-link
            class="material-link"
            icon="el-icon-setting"
            type="primary"
            :underline="false"
            @click="manage"
            >管理分组</el-link
          >
        </div>
      </el-select>
    </div>
    <div class="search">
      <el-input v-model="searchValue" :placeholder="`请输入${typeText}名称`" size="mini"></el-input>
      <el-button plain size="mini" class="search-btn" @click="submit">搜索</el-button>
    </div>
    <el-button type="primary" size="mini" class="upload-btn" @click="upload">{{
      `上传${typeText}`
    }}</el-button>
  </div>
</template>

<script>
export default {
  props: {
    category: Array,
    value: String,
    searchValue: String,
    type: Number
  },
  data() {
    return {}
  },
  computed: {
    typeText() {
      const text = {
        1: '图片',
        2: '音频',
        3: '视频',
        4: '文档'
      }
      return text[this.type]
    }
  },
  methods: {
    change(val) {
      this.$emit('update:value', val)
      this.$emit('change')
    },
    submit() {
      this.$emit('update:searchValue', this.searchValue)
      this.$emit('submit')
    },
    upload() {
      this.$emit('upload')
    },
    manage() {
      this.$emit('manage')
      this.$refs.select.blur()
    }
  }
}
</script>

<style lang="scss">
.material-select {
  .material-placeholder {
    height: 34px;
  }
  .material-link {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    height: 34px;
    border-top: 1px solid #dcdfe6;
    background-color: #ffffff;
  }
}
</style>
<style lang="scss" scoped>
.material-header {
  display: flex;
  .search {
    display: flex;
    margin-left: 20px;
    .search-btn {
      margin-left: 10px;
    }
  }
  .upload-btn {
    margin-left: auto;
  }
}
</style>
